<template>
  <div class="my_post">
    <div class="row  pt-4 pl-3 pb-2">
      <div class="col-md-7">
        <el-collapse accordion>
          <el-collapse-item>
            <template slot="title">
              <h5 class="" style="font-weight: bold"><i class="fa fa-shopping-bag fa-fw"></i>我的闲置物品</h5>
              <div class="fontclass">
                <a class="pl-5 text-right" href="javascript:void(0);"><i class="fa fa-search fa-fw"></i> 搜索</a>
              </div>
            </template>
            <!--            搜索框-->
            <div class="search">
              <div class="">
                <el-input
                    size="large"
                    placeholder="请输入闲置物品名称..."
                    v-model="find_idle"
                    clearable
                    @keyup.enter.native="findByName">
                </el-input>
              </div>
<!--              <div class="col-md-5">-->
<!--                <span class="input-group-btn">-->
<!--                  <el-button type="" icon="el-icon-search" @click="findByName()" size="large">搜索</el-button>-->
<!--                </span>-->
<!--                <span class="pl-2">-->
<!--                  <el-button type="" @click="clearInput()" size="large">重置</el-button>-->
<!--                </span>-->
<!--              </div>-->
            </div>

          </el-collapse-item>
        </el-collapse>
      </div>

      <div class="col-md-5" align="right">

        <el-form :model="pc" ref="pc" label-width="100px" class="pc" status-icon>
          <el-form-item label="" :label-width="formLabelWidth" prop="idle_ifcheck">
            <el-select v-model="idle_ifcheck" placeholder="选择闲置物品审核情况..."
                       filterable
                       @change="findByCheck">
              <el-option v-for="(post_check) in idle_check" :label="post_check.name" :value="post_check.id" :key="post_check.id">
              </el-option>
            </el-select>
          </el-form-item>

        </el-form>
      </div>
    </div>

    <!--我的帖子列表-->
    <div class="person_post" v-if="this.show_info.length>0">
      <div class="post " v-for="(myidle) in show_info" :key=myidle.idle_item_id>
        <ul class="list-unstyled pl-3">
          <li class="media">
            <div class="media-body">
              <div class="row">
                <div class="title col-md-8">
                  <a class="mb-1 pr-2" href="javascript:void(0);" @click="change_edit(myidle.idle_item_id)">{{myidle.idle_item_name}}</a>
                  <el-tag v-if="myidle.idle_item_ifdeal==1" type="danger">交易中</el-tag>
                  <el-tag v-else-if="myidle.idle_item_ifdeal==2" type="success">已交易</el-tag>
                  <el-tag v-else-if="myidle.idle_item_ifdeal==3" type="warning">可交易</el-tag>
                </div>
                <div class="col-md-4" align="right">
                  <p style="color: #6b6e71;font-size: 17px;" v-if="myidle.idle_item_check==1"><i class="fa fa-check-circle pr-2" style="color: #2a7f61"></i>审核通过</p>
                  <p style="color: #6b6e71;font-size: 17px;" v-if="myidle.idle_item_check==2"><i class="fa fa-close pr-2" style="color: #a11918"></i>审核不通过</p>
                  <p style="color: #6b6e71;font-size: 17px;" v-if="myidle.idle_item_check==0"><i class="fa fa-spinner fa-pulse pr-2" style="color: #e9ca00"></i>审核中</p>
                </div>
              </div>
              <div class="content pt-2">
                <p>{{myidle.idle_item_info}}</p>
              </div>

              <div class="row pt-3 fontclass" style="text-align: left;">
                <div class="col-md-8">
                  <a class="pr-2" href="javascript:void(0);" v-show="myidle.idle_item_check==1" @click="idle_comment(myidle)">
                    <i class="fa fa-comment fa-fw"></i>评论
                  </a>


                  <!--                  评论的弹窗-->
                  <el-dialog
                      title="发表评论"
                      :visible.sync="CommentVisible"
                      width="40%"
                      @close="handleClose">
                    <el-input v-model="CommentForm.comment_content"
                              type="textarea"
                              maxlength="100"
                              autocomplete="off"
                              show-word-limit
                              placeholder="请输入评论，1-100个字符..."></el-input>
                    <div class="pt-3">
                      <el-button type="primary" @click="submitForm()">发 表</el-button>
                      <el-button @click="resetForm()">重置</el-button>
                      <el-button @click="cancel()">取 消</el-button>
                    </div>
                    <!--                  其他评论内容-->
                    <div class="comment_main pt-3">
                      <div class="">
                        <ul class="list-group">
                          <li class="row border-bottom pb-3 pt-3" v-for="item in comment_info" :key="item.idle_comment_id">
                            <div class="col-md-8" align="left">
                              <span style="color: #0f5da2;font-size: 15px;font-weight: bold">评论人：{{item.user_name}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
                              <span class="pt-2">{{item.idle_comment_content}}</span>
                            </div>
                            <div class="col-md-4" align="right" style="color: black">发布于 {{item.idle_comment_time}}</div>
                          </li>
                        </ul>
                        <div class="pt-4">
                          <el-pagination
                              @size-change="handleSizeChange_com"
                              @current-change="handleCurrentChange_com"
                              :current-page.sync="currentPage_com"
                              :page-size="param_com.limit_com"
                              layout="total,prev, pager, next"
                              :total="comment_total">
                          </el-pagination>
                        </div>
                      </div>

                    </div>

                  </el-dialog>

<!--                  <router-link :to="{path:'/Personal/One_Myidle',query:{idle:myidle}}">-->
                    <a class="pr-2" href="javascript:void(0);" @click="change_edit(myidle.idle_item_id)">
                      <i class="fa fa-pencil fa-fw"></i> 编辑
                    </a>
<!--                  </router-link>-->


                  <a class="pr-2" @click="delete_idle(myidle.idle_item_id)" href="javascript:void(0);">
                    <i class="fa fa-trash fa-fw"></i> 删除
                  </a>
                </div>
                <div class="col-md-4" align="right">
                  <p style="color: #6b6e71;font-size: 17px;">编辑于 {{myidle.idle_item_time}}</p>
                </div>

              </div>
            </div>
          </li>
          <div class="dropdown-divider"></div>
        </ul>
      </div>



    </div>
    <div class="noFile" v-else>
      <img :src="imgs.noInfo" alt="...">
      <h2>{{this.nullContainer}}</h2>
    </div>
    <div class="block pt-3 pb-4" v-show="this.show_info.length>0">
      <el-pagination
          @current-change="handleCurrentChange"
          :current-page="idleContainerPage"
          :page-size="idleContainerSize"
          layout="total, prev, pager, next"
          :total="total">
        <!--          :background="'whitesmoke'" -->
      </el-pagination>
    </div>
  </div>
</template>

<script>
import noInfo from "@/assets/noFile.png";
import {getAllIdleInfoByUserID,deleteIdle,getCommentInfoByIdleID,addComment} from '@/api/Resale'
import {getUser_Basic} from "@/api/User";


export default {
  name: "person_idle",
  data(){
    return{
      imgs:{
        noInfo
      },
      //分页
      idleContainerPage:0, // 分页的数据：当前页数
      idleContainerSize:0, // 分页的数据：每页的数量
      total: 0,
      idle_info:[],
      show_info:[],
      copy_info:[],
      search_info:[],
      search_info_check:[],

      nullContainer: "你还没有发布闲置物品~",
      idle_ifcheck:'',

      formLabelWidth: '120px',
      //
      activeName: '1',
      find_idle:'',
      //下拉框
      selectedChecks: [],
      idle_check: [
        {
          id:3,
          name: '全部'
        },
        {
          id: 1,
          name: '审核通过'
        },
        {
          id: 2,
          name: '审核不通过'
        },
        {
          id:0,
          name: '审核中'
        }
      ],
      //下拉框
      pc:'',
      //  查看评论弹窗
      CommentVisible:false,
      CommentForm:{
        comment_content:'',
      },
      comment_info:[],
      comment_total:0,
      currentPage_com:1,
      param_com:{
        page_com:1,
        limit_com:5,
      },
      idle:[],
      code:0,
      user_ifcheck:'',



    }
  },
  methods:{
     init(){
       // 获取当前登录用户的全部闲置物品信息
       getAllIdleInfoByUserID({
         // token:window.sessionStorage.getItem('token')
       }).then(res=>{
         this.idle_info=res.data.data;
         this.copy_info=res.data.data;
         this.getShowIdle();
       });
       //获取用户个人基本信息————是否已审核
       getUser_Basic({
         // token:window.sessionStorage.getItem('token')
       }).then(res=>{
         this.user_ifcheck=res.data.ifcheck;
       });
    },
    //分页
    getShowIdle(){
      this.idleContainerSize=parseInt(4);
      this.show_info = this.idle_info.slice((this.idleContainerPage - 1) * this.idleContainerSize, this.idleContainerPage * this.idleContainerSize);
      this.total=parseInt(this.idle_info.length);
    },
    //page改变时的回调函数，参数为当前页码
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.idleContainerPage= parseInt(val);
      this.getShowIdle();
    },
    //根据闲置物品标题搜索功能
    findByName(){
      var search=this.find_idle;
      if(search==""||search==null)
      {
        this.$msg.error('输入框不能为空！');
        this.init();
      }
      else {
        //执行本地过滤
        var search_list=this.copy_info;
        this.search_info=[];  //装搜索结果的容器
        for(let i=0;i<search_list.length;i++)
        {
          if(search_list[i].idle_item_name.indexOf(search)>=0)
          {
            this.search_info.push(search_list[i]);
          }
        }
        if(this.search_info.length==0)
        {
          this.nullContainer='未找到相关结果,刷新一下~';
          this.$msg.error('未找到相关结果,刷新一下~');
        }
        else
        {
          this.nullContainer='暂无数据~';
        }
        this.idle_info=this.search_info;
        //分页
        this.idleContainerPage=parseInt(1);
        this.getShowIdle();

        //清空搜索框
        this.find_idle="";
      }
    },
    // 清空搜索框
    clearInput(){
      //清空搜索框
      this.find_idle="";
      this.init();
    },
    //根据审核情况查询
    findByCheck(){
      // alert(this.post_check);
      var search=this.idle_ifcheck;
      var search_list=this.copy_info;
      this.search_info_check=[];  //装搜索结果的容器
      if(search===3){
        // 全部
        this.init();

      }else{
        //带条件筛选
        for(let i=0;i<search_list.length;i++)
        {
          if(search_list[i].idle_item_check===search)
          {
            this.search_info_check.push(search_list[i]);
          }
        }
        if(this.search_info_check.length==0)
        {
          this.nullContainer='未找到相关结果,刷新一下~';
          this.$msg.error('未找到相关结果,刷新一下~');
        }
        else
        {
          this.nullContainer='暂无数据~';
        }

        this.idle_info=this.search_info_check;
        //分页
        this.idleContainerPage=parseInt(1);
        this.getShowIdle();

        //清空搜索框
        // this.idle_ifcheck="";

      }
    },
    //删除闲置物品信息
    delete_idle(idle_item_id){
      //再次确认
      this.$confirm('确认删除该闲置物品信息吗?删除后无法恢复哦~', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.delete_main(idle_item_id);
      }).catch(() => {
        this.$msg.error("取消删除！");
      });
    },
    delete_main(idle_item_id){
      deleteIdle({
        idle_item_id:idle_item_id
      }).then(res=>{
        if(res.data.code===1){
          this.$msg.success("删除成功！");
        }
        else{
          this.$msg.error("删除失败！");
        }
        this.init();
      });
    },
    //跳转弹窗 显示评论和发表评论
    idle_comment(myidle){
      this.CommentVisible=true;
      this.idle=myidle;
      this.getComment();
    },
    //显示评论和发表评论的弹窗
    getComment(){
      //获取评论
      getCommentInfoByIdleID({
        idle_item_id:this.idle.idle_item_id,
        page:this.param_com.page_com,
        limit:this.param_com.limit_com,
        // token:window.sessionStorage.getItem('token')
      }).then(res=>{
        this.comment_info=res.data.data;
        this.comment_total=res.data.total;
      })

    },
    //  清空发布的弹窗的内容 重置
    resetForm() {
      this.CommentForm.comment_content="";
    },
    //  关闭弹窗
    cancel() {
      this.CommentVisible = false
      this.CommentForm.comment_content="";
    },
    // 右上角 × 取消按钮
    closeDiv() {
      this.CommentForm.comment_content="";
    },
    handleClose(){
      this.CommentForm.comment_content="";
    },
    //发布评论
    submitForm() {

      if(this.user_ifcheck!=1){

        this.$msg.error("未通过身份审核不可发布！");
        return false;
      }

      if(this.CommentForm.comment_content.length>=100){
        this.$msg.error("评论内容不能超过100字符！");
        return false;
      }
      if (this.CommentForm.comment_content.length!=0) {

        //再次确认
        this.$confirm('确认发表?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {

          this.addcomment(this.idle);

        }).catch(() => {
          this.$msg.error("发表失败！");
        });

      } else {
        this.$msg.error("请输入内容，不能为空哦！");
        return false;
      }

    },
    addcomment(idle){
      // 发表闲置物品评论
      addComment({
        idle_item_id:idle.idle_item_id,
        idle_comment_content:this.CommentForm.comment_content,
        // token:window.sessionStorage.getItem('token')
      }).then(res=>{
        if(res.data.code==1){
          this.$msg.success("发表成功！");
        }else{
          this.$msg.error("发表失败！");
        }
        this.cancel();
      });

    },
    handleSizeChange_com(val) {
      console.log(`每页 ${val} 条`);
      this.param_com.limit_com=val;
      this.getComment();

    },
    handleCurrentChange_com(val) {
      console.log(`当前页: ${val}`);
      this.param_com.page_com=val;
      this.getComment();

    },
    change_edit(idle_item_id){
      if(this.user_ifcheck!=1){

        this.$msg.error("未通过身份审核不可重新编辑闲置物品信息！");
        return false;
      }
      else{
        this.$router.push({path:'/Personal/One_Myidle',query:{idle_item_id:idle_item_id}});
      }
    },



  },
  created() {
    let _this = this;

    //分页
    this.idleContainerPage=parseInt(1);
    _this.init();

  }

}
</script>

<style scoped>
.el-pagination {
  text-align: center;
}
/*多行显示省略号，数字5为超出5行显示*/
.content p{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  overflow: hidden;
  letter-spacing:3px;
  color: #6b6e71;
  font-size: 16px;
}
.content p:hover{
  color: black;
}
/*新闻标题*/
.title a{
  font-size: 23px;
  color: black;
}
.title a:hover{
  color: #2a7f61;
}
/*无数据图*/
.noFile{
  padding-top: 200px;
  padding-bottom: 300px;
  margin: 0px auto;
  text-align: center;
  font-size: 50px;
  color: #6b6e71;
}
.fontclass a{
  font-size: 18px;
  color: #1c6285;
}
.fontclass a:hover{
  font-weight: bold;
}
/*搜索框*/
.search{
  background-color:rgba(255,255,255,0.0)!important;
  position: relative;
  /*opacity: 0.5;*/
}
::v-deep .el-collapse-item__header
{
  color: #1c6285;
  background-color:rgba(255,255,255,0.0)!important;
  position: relative;
}
::v-deep .el-collapse-item__content {
  text-align: left;
  color:#1c6285;
  background-color:rgba(255,255,255,0.0);
  padding-bottom: 0;
}
</style>
